<template>
	<view>
		<view class="header">
			<i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> 控制台 <i-icon size="20upx" color="#666"
				name="arrow-right-s-line"></i-icon> 订单管理 <i-icon size="20upx" color="#666" name="arrow-right-s-line">
			</i-icon> 废旧回收订单
		</view>
		<view class="bl">
			<view class="h1">
				<i-icon size="30upx" color="#999" name="exchange-box-line"></i-icon> 废旧回收订单
			</view>
		</view>
		<view class="p-table">
			<view class="bc" style="margin-bottom: 10px;">
				<input type="text" v-model="search.keyword" placeholder="输入关键字" />
				<select v-model="search.recycleClassify" class="p-sle">
					<option value="">回收种类</option>
					<option v-for="(item,index) in recycleClassify" :value="item">{{item}}</option>
				</select>
				<select v-model="search.orderStatus" class="p-sle">
					<option value="">交易状态</option>
					<option value="2">成功</option>
					<option value="3">失败</option>
					<option value="1">处理中</option>
				</select>
				<view class="p-date-box">
					<picker mode="date" @change="selectDate1" class="p-date">
						<view>{{search.startDate||'开始日期'}}</view>
					</picker>
					<text>到</text>
					<picker mode="date" @change="selectDate2" class="p-date">
						<view>{{search.endDate||"结束日期"}}</view>
					</picker>
					<button type="button" class="p-btn" @click="search.startDate='';search.endDate='';">重置</button>
				</view>
				<button class="r10" type="button" @click="searchOrder()">搜索</button>
				<export-excel v-if="recycleList && recycleList.length>0" name="表格.xls" :data="recycleList"
					:fields="excelFields">
					<button class="b-dell" type="button">导出表格</button>
				</export-excel>
				<button class="b-dell" @click="JsonToExcel()">导出表格(测试)</button>
			</view>
			<hr>
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>订单号</th>
					<th style=" text-align: left;">回收种类</th>
					<th style=" text-align: left;">数量</th>
					<th style=" text-align: center;">交易金额</th>
					<th style=" text-align: center;">交易时间</th>
					<th style=" text-align: center;">业主</th>
					<th style=" text-align: center;">站长</th>
					<th style=" text-align: center;">站点</th><!-- 
					<th>所属物业</th> -->
					<th style=" text-align: center;">状态</th>
				
				</tr>
				<tr v-for="(item,index) in recycleList" @click="detail=item">
					<td v-html="keywordHighlight(item.pono)"></td>
					<td>
						<view style=" text-align: left;">
							<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
							<text v-html="keywordHighlight(item.recycleName)"></text>
						</view>
					</td>
					<td  style=" text-align: left;">{{item.quantityUnit}}</td>
					<td style=" text-align: center;color: #7800BE;">￥{{item.amount}}</td>
					<td  style=" text-align: center;">{{item.createDatetime}}</td>
					<td style=" text-align: center;" v-html="keywordHighlight(item.payeeName)"></td>
					<td style=" text-align: center;" v-html="keywordHighlight(item.checkerName)"></td>
					<td style=" text-align: center;" v-html="keywordHighlight(item.stationName)"></td>
					<!-- <td v-html="keywordHighlight(item.propertyName)"></td> -->
					<td style=" text-align: center;">
						<view class="asf" v-if="item.status=='成功'">

							<view class="bz">
								<i-icon style="margin-right: 5rpx;" size="20upx" color="#00aa00"
									name="checkbox-circle-fill"></i-icon>{{item.status}}
							</view>
						</view>
						<view class="asf" v-if="item.status=='失败'">

							<view class="bz">
								<i-icon style="margin-right: 5rpx;" size="20upx" color="#ff5500"
									name="checkbox-circle-fill"></i-icon>{{item.status}}
							</view>
						</view>
						<view class="asf" v-if="item.status=='处理中'">

							<view class="bz">
								<i-icon style="margin-right: 5rpx;" size="20upx" color="#f1c935"
									name="checkbox-circle-fill"></i-icon>{{item.status}}
							</view>
						</view>
					</td>
				</tr>
				<tr v-if="total==0">
					<td colspan="10" style="text-align: center;color: #848484; ">暂无数据</td>
				</tr>
			</table>
			<view class="bz t20">
				<Pagination :total="total" :pageSize="size" :nowPage="current" @change="alterCurrent">
				</Pagination>
				<picker mode="selector" :range="[10,20,30,50,100]"
					@change="size=[10,20,30,50,100][$event.detail.value];current=1;searchOrder()" class="p-selector">
					{{size}}条/页
				</picker>
			</view>
		</view>
		<view v-if="detail" class="p-appoint-detail">
			<view style="border-bottom:1rpx solid #CCCCCC;height:50rpx;line-height:50rpx;" @click="node=null">
				<text style="font-size: 22px;margin-left: 15px;">订单详情</text>
				<text style="float:right;margin-right:25rpx;cursor:pointer;" @click="detail=null">关闭</text>
			</view>
			<view style="max-height:90vh;overflow-y:auto;line-height:40rpx;margin-top: 20px;">
				<view><text class="p-td">订单号</text> {{detail.pono}}</view>
				<!-- <view><text class="p-td">类型</text>{{detail.type}}</view> -->
				<view><text class="p-td">交易状态</text>{{detail.status}}</view>
				<view><text class="p-td">交易时间</text>{{detail.createDatetime}}</view>
				<view><text class="p-td">交易金额</text>￥{{detail.amount}}</view>
				<view><text class="p-td">站点</text>{{detail.stationName}}({{detail.propertyName}})</view>
				<view><text class="p-td">业主</text>{{detail.payeeName}}</view>
				<view><text class="p-td">站长</text>{{detail.checkerName}}</view>
				<view class="btt">回收清单</view>
				<view class="hsqd">
					<view v-for="(one,no) in detail.plusList" class="hslist bc">
						<view><text class="xhm">{{no+1}}</text></view>
						<view>
							<view><text class="p-td">回收类别</text>{{one.recycleName}}</view>
							<view><text class="p-td">回收价格</text>￥{{one.price}}/{{one.unit}}</view>
							<view><text class="p-td">测量重量</text>{{one.quantity}}{{one.unit}}</view>
							<view><text class="p-td">结算金额</text>{{one.quantity}}{{one.unit}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let that;
	import Pagination from "@/components/pagination.vue"
	import exportExcel from "@/components/json-2-excel/Json2Excel.vue"
	import XLSX from "@/components/xlsx.core.min.js"
	export default {
		components: {
			Pagination,
			exportExcel,
			XLSX
		},
		data() {
			return {
				recycleClassify: ["废纸", "塑料", "废金属", "服饰", "家电"],
				recycleList: [],
				pages: 0,
				total: 0,
				current: 1,
				size: 10,
				search: {
					recycleClassify: '',
					orderStatus: '',
					startDate: '',
					endDate: '',
					keyword: ''
				},
				detail: null,
				excelFields: {
					'流水号': 'pono',
					'回收种类': 'recycleName',
					'数量': 'quantityUnit',
					'交易金额': 'amount',
					'交易时间': 'createDatetime',
					'业主': 'payeeName',
					'站长': 'checkerName',
					'所在站点': 'stationName',
					'所属物业': 'propertyName',
					'交易类型': 'type',
					'交易状态': 'status'
				}
			}
		},
		methods: {
			selectDate1(e) {
				this.search.startDate = e.target.value;
			},
			selectDate2(e) {
				this.search.endDate = e.target.value;
			},
			searchOrder() {
				this.getRecycleList(this.current, this.size, this.search)
			},
			//获取废旧回收列表
			getRecycleList(current, size, search) {
				current = (current && current > 0) ? current : 1;
				size = size ? size : 10;
				let params = "";
				if (search) {
					for (let key in search) {
						if (search[key]) {
							params += "&" + key + "=" + search[key];
						}
					}
				}
				this.httpRequest({
					url: '/admin/order/recycle/list?current=' + current + '&size=' + size +
						params,
					method: 'GET',
					fn(data) {
						// console.log('废旧回收列表：', data)
						that.recycleList = data.records
						that.pages = data.pages
						that.total = parseInt(data.total)
						that.current = parseInt(data.current)
						that.size = parseInt(data.size)

						for (let i in that.recycleList) {
							let one = that.recycleList[i];
							// console.log("附加订单", i, one.plusList)
							if (one.plusList && one.plusList.length > 0) {
								one.propertyName = one.plusList[0].propertyName;
								one.stationName = one.plusList[0].stationName;
								one.recycleName = ''
								one.quantityUnit = ''
								for (let j in one.plusList) {
									one.recycleName += one.plusList[j].recycleName + "\n";
									one.quantityUnit += one.plusList[j].quantity + one.plusList[j].unit + "\n";
								}
							}
							one.createDatetime = one.createDatetime.substring(0, 16)
							// one.pono = '\'' + one.pono
						}
					}
				})
			},
			alterCurrent(c) {
				this.getRecycleList(c, this.size)
			},
			//关键字高亮
			keywordHighlight(content) {
				if (content && this.search.keyword) {
					let reg = new RegExp(this.search.keyword, 'g')
					content = content.replace(reg, `<font color="#2a8be5">${this.search.keyword}</font>`)
				}
				return content;
			},
			/**
			 * 导出表格
			 * @param {JsonArray} jsonArr 数据
			 * @param {JsonObject} fields 要显示的字段
			 */
			JsonToExcel(jsonArr, fields, confirm) {
				if (!confirm) {
					uni.showModal({
						content: '该功能在测试中，确认使用该功能吗？',
						success: (res) => {
							if (res.confirm) {
								that.JsonToExcel('', '', true)
							}
						}
					})
					return;
				}
				jsonArr = this.recycleList
				fields = {
					'pono': '流水号',
					'recycleName': '回收种类',
					'quantityUnit': '数量',
					'amount': '交易金额',
					'createDatetime': '交易时间',
					'payeeName': '业主',
					'checkerName': '站长',
					'stationName': '所在站点',
					'propertyName': '所属物业',
					'type': '交易类型',
					'status': '交易状态'
				};
				let data = [];
				let headers = []
				for (let field in fields) {
					headers.push(fields[field])
				}
				data.push(headers)
				for (let i in jsonArr) {
					let line = []
					for (let field in fields) {
						line.push(jsonArr[i][field] || '');
					}
					data.push(line);
				}
				// console.log("导出表格数据：", data)
				let sheet = XLSX.utils.aoa_to_sheet(data)
				XLSX.downloadBlob(XLSX.sheet2blob(sheet), '表格.xlsx')
			}
		},
		onLoad() {
			that = this;
			this.getRecycleList(this.current, this.size)
		}
	}
</script>
<style>
	.btt {
		margin: 30px 30px 10px 30px;
		font-size: 22px;
		color: #7800BE;

	}

	.hslist {
		border-bottom: 1px solid #dcdfe6;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.xhm {
		border-radius: 30px;
		line-height: 30px;
		background-color: #7800BE;
		font-size: 12px;
		color: #fff;
		padding: 10px;
	}

	.hsqd {
		margin: 0px 30px 10px 30px;
		font-size: 14px;
	}
</style>
